<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>企业信息管理</span>
        <div style="float: right;">
          <el-button
              type="success"
              icon="el-icon-check"
              size="mini"
              @click="submitForm"
          >保存</el-button>
          <el-button
              type="info"
              icon="el-icon-close"
              size="mini"
              @click="cancelEditing"
          >取消</el-button>
        </div>
      </div>

      <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="120px"
      >
        <el-tabs v-model="activeTab">
          <el-tab-pane label="企业简介" name="profile">
            <el-form-item label="企业图片" prop="profileImage">
              <image-upload v-model="form.profileImage"/>
            </el-form-item>
            <el-form-item label="企业简介(中文)" prop="companyProfileZh">
              <UEditor
                  v-model="form.companyProfileZh"
                  editor-id="companyProfileZh1"
                  :config="{ initialFrameHeight: 400 }"
              />
            </el-form-item>
            <el-form-item label="企业简介(英文)" prop="companyProfileEn">
              <UEditor
                  v-model="form.companyProfileEn"
                  editor-id="companyProfileEn2"
                  :config="{ initialFrameHeight: 400 }"
              />
            </el-form-item>
            <el-form-item label="企业简介(德文)" prop="companyProfileDe">
              <UEditor
                  v-model="form.companyProfileDe"
                  editor-id="companyProfileDe3"
                  :config="{ initialFrameHeight: 400 }"
              />
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane label="企业文化" name="culture">
            <el-form-item label="企业文化(中文)" prop="corporateCultureZh">
              <el-input v-model="form.corporateCultureZh" type="textarea" rows="8" />
            </el-form-item>
            <el-form-item label="企业文化(英文)" prop="corporateCultureEn">
              <el-input v-model="form.corporateCultureEn" type="textarea" rows="8" />
            </el-form-item>
            <el-form-item label="企业文化(德文)" prop="corporateCultureDe">
              <el-input v-model="form.corporateCultureDe" type="textarea" rows="8" />
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane label="企业定位" name="position">
            <el-form-item label="企业定位(中文)" prop="companyPositionZh">
              <el-input v-model="form.companyPositionZh" type="textarea" rows="8" />
            </el-form-item>
            <el-form-item label="企业定位(英文)" prop="companyPositionEn">
              <el-input v-model="form.companyPositionEn" type="textarea" rows="8" />
            </el-form-item>
            <el-form-item label="企业定位(德文)" prop="companyPositionDe">
              <el-input v-model="form.companyPositionDe" type="textarea" rows="8" />
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane label="企业愿景" name="vision">
            <el-form-item label="企业愿景(中文)" prop="companyVisionZh">
              <el-input v-model="form.companyVisionZh" type="textarea" rows="8" />
            </el-form-item>
            <el-form-item label="企业愿景(英文)" prop="companyVisionEn">
              <el-input v-model="form.companyVisionEn" type="textarea" rows="8" />
            </el-form-item>
            <el-form-item label="企业愿景(德文)" prop="companyVisionDe">
              <el-input v-model="form.companyVisionDe" type="textarea" rows="8" />
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane label="优势介绍" name="advantages">
            <el-form-item label="优势介绍(中文)" prop="advantagesZh">
              <UEditor
                  v-model="form.advantagesZh"
                  editor-id="advantagesZh1"
                  :config="{ initialFrameHeight: 400 }"
              />
            </el-form-item>
            <el-form-item label="优势介绍(英文)" prop="advantagesEn">
              <UEditor
                  v-model="form.advantagesEn"
                  editor-id="advantagesEn2"
                  :config="{ initialFrameHeight: 400 }"
              />
            </el-form-item>
            <el-form-item label="优势介绍(德文)" prop="advantagesDe">
              <UEditor
                  v-model="form.advantagesDe"
                  editor-id="advantagesDe3"
                  :config="{ initialFrameHeight: 400 }"
              />
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { listSysCompanyInfo, updateSysCompanyInfo } from "@/api/sysCompanyInfo/sysCompanyInfo"
import UEditor from "@/components/UEditor/index.vue";

export default {
  name: "SysCompanyInfo",
  components: {UEditor},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 表单参数
      form: {
        id: null,
        companyProfileZh: '',
        companyProfileEn: '',
        companyProfileDe: '',
        profileImage: '',
        corporateCultureZh: '',
        corporateCultureEn: '',
        corporateCultureDe: '',
        companyPositionZh: '',
        companyPositionEn: '',
        companyPositionDe: '',
        companyVisionZh: '',
        companyVisionEn: '',
        companyVisionDe: '',
        advantagesZh: '',
        advantagesEn: '',
        advantagesDe: ''
      },
      // 当前激活的标签页
      activeTab: 'profile',
      // 表单原始数据备份
      originalForm: {},
      // 表单校验
      rules: {
        companyProfileZh: [
          { required: true, message: "企业简介(中文)不能为空", trigger: "blur" }
        ],
        companyProfileEn: [
          { required: true, message: "企业简介(英文)不能为空", trigger: "blur" }
        ],
        companyProfileDe: [
          { required: true, message: "企业简介(德文)不能为空", trigger: "blur" }
        ],
        profileImage: [
          { required: true, message: "图片不能为空", trigger: "blur" }
        ],
        corporateCultureZh: [
          { required: true, message: "企业文化(中文)不能为空", trigger: "blur" }
        ],
        corporateCultureEn: [
          { required: true, message: "企业文化(英文)不能为空", trigger: "blur" }
        ],
        corporateCultureDe: [
          { required: true, message: "企业文化(德文)不能为空", trigger: "blur" }
        ],
        companyPositionZh: [
          { required: true, message: "企业定位(中文)不能为空", trigger: "blur" }
        ],
        companyPositionEn: [
          { required: true, message: "企业定位(英文)不能为空", trigger: "blur" }
        ],
        companyPositionDe: [
          { required: true, message: "企业定位(德文)不能为空", trigger: "blur" }
        ],
        companyVisionZh: [
          { required: true, message: "企业愿景(中文)不能为空", trigger: "blur" }
        ],
        companyVisionEn: [
          { required: true, message: "企业愿景(英文)不能为空", trigger: "blur" }
        ],
        companyVisionDe: [
          { required: true, message: "企业愿景(德文)不能为空", trigger: "blur" }
        ],
        advantagesZh: [
          { required: true, message: "优势介绍(中文)不能为空", trigger: "blur" }
        ],
        advantagesEn: [
          { required: true, message: "优势介绍(英文)不能为空", trigger: "blur" }
        ],
        advantagesDe: [
          { required: true, message: "优势介绍(德文)不能为空", trigger: "blur" }
        ]
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    /** 加载数据 */
    loadData() {
      this.loading = true
      // 使用list接口获取第一条数据
      listSysCompanyInfo({
        pageNum: 1,
        pageSize: 1
      }).then(response => {
        if (response.rows && response.rows.length > 0) {
          this.form = response.rows[0]
          this.originalForm = JSON.parse(JSON.stringify(response.rows[0]))
        } else {
          this.$modal.msgWarning("暂无企业信息数据")
          this.resetForm()
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    /** 重置表单 */
    resetForm() {
      this.form = {
        id: null,
        companyProfileZh: '',
        companyProfileEn: '',
        companyProfileDe: '',
        profileImage: '',
        corporateCultureZh: '',
        corporateCultureEn: '',
        corporateCultureDe: '',
        companyPositionZh: '',
        companyPositionEn: '',
        companyPositionDe: '',
        companyVisionZh: '',
        companyVisionEn: '',
        companyVisionDe: '',
        advantagesZh: '',
        advantagesEn: '',
        advantagesDe: ''
      }
      this.originalForm = JSON.parse(JSON.stringify(this.form))
    },

    /** 取消编辑 */
    cancelEditing() {
      // 恢复原始数据
      this.form = JSON.parse(JSON.stringify(this.originalForm))
      this.$refs.form.clearValidate()
    },

    /** 提交表单 */
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          // 确保更新时带上ID
          const submitData = {...this.form}

          updateSysCompanyInfo(submitData).then(response => {
            this.$modal.msgSuccess("修改成功")
            // 更新备份数据
            this.originalForm = JSON.parse(JSON.stringify(this.form))
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.el-textarea__inner {
  min-height: 120px !important;
}

.el-form-item__content {
  line-height: normal;
}
.app-container{
  padding: 0 !important;
}
</style>
